<form nz-form [formGroup]="formGroup" [nzLayout]="ezFormConfiguration?.layout || 'vertical'">
  <ng-container [ngSwitch]="ezFormConfiguration?.groupStyle">
    <ng-container *ngSwitchCase="'default'">
      <ng-container *ngTemplateOutlet="defaultGroupStyle"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="'tab'">
      <ng-container *ngTemplateOutlet="tabGroupStyle"></ng-container>
    </ng-container>
    <ng-container *ngSwitchDefault>
      <ng-container *ngTemplateOutlet="defaultGroupStyle"></ng-container>
    </ng-container>
  </ng-container>

  <nz-form-item [nzType]="ezFormConfiguration?.layout === 'inline' ? null : 'flex'"
    [nzJustify]="ezFormConfiguration?.layout === 'inline' ? null : 'end'" nzAlign="middle">
    <nz-form-control [nzSpan]="24" style="text-align: right;">
      <button nz-button nzType="default" (click)="onReset()" [nzBlock]="ezFormConfiguration.buttonsFull"
        *ngIf="!ezFormConfiguration?.resetButtonHidden">{{ezFormConfiguration?.resetButtonText || '重置'}}</button>
      <button nz-button nzType="primary" (click)="onSubmit()" [nzBlock]="ezFormConfiguration.buttonsFull"
        [nzLoading]="submitLoading">{{ezFormConfiguration?.submitButtonText || '确定'}}</button>
    </nz-form-control>
  </nz-form-item>
</form>

<ng-template #defaultGroupStyle>
  <ng-container *ngFor="let group of ezFormConfiguration?.groups">
    <h3 *ngIf="group?.title">{{group.title}}</h3>
    <ez-form-group [ezFormGroupConfiguration]="group"></ez-form-group>
  </ng-container>
</ng-template>

<ng-template #tabGroupStyle>
  <nz-tabset [nzType]="'card'" [nzTabPosition]="ezFormConfiguration?.tabPosition || 'top'">
    <nz-tab *ngFor="let group of ezFormConfiguration?.groups" [nzTitle]="group?.title">
      <ez-form-group [ezFormGroupConfiguration]="group"></ez-form-group>
    </nz-tab>
  </nz-tabset>

</ng-template>
